<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布文章 - 创作者平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#1F2937',
                        'neutral-light': '#F3F4F6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .btn-effect {
                @apply transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0;
            }
            .tag-item {
                @apply bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-neutral">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌标识 -->
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa fa-pencil-square-o text-primary text-2xl"></i>
                    <span class="text-xl font-bold">创作者平台</span>
                </a>

                <!-- 主导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">我的文章</a>
                    <a href="#" class="text-primary font-medium">发布文章</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">数据分析</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助中心</a>
                </nav>

                <!-- 用户区域 -->
                <div class="flex items-center space-x-4">
                    <button class="text-gray-600 hover:text-primary transition-colors relative p-1.5">
                        <i class="fa fa-bell-o text-lg"></i>
                        <span class="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">2</span>
                    </button>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent hover:border-primary transition-colors">
                            <span class="text-gray-700 hidden sm:inline">张小明</span>
                            <i class="fa fa-angle-down text-gray-500 text-xs"></i>
                        </div>
                        <!-- 用户下拉菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden group-hover:block">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">个人中心</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">账号设置</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">创作中心</a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-sm text-red-500 hover:bg-red-50">退出登录</a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-btn" class="md:hidden text-gray-600 p-1.5">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden pb-4 border-t">
                <nav class="flex flex-col space-x-1 p-2">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">首页</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">我的文章</a>
                    <a href="#" class="text-primary font-medium px-3 py-2 rounded-md bg-primary/5">发布文章</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">数据分析</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">帮助中心</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题模块 -->
        <section id="page-title" class="mb-8">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">发布新文章</h1>
                    <p class="text-gray-500 mt-1">分享你的知识、经验和想法</p>
                </div>
                <div class="flex items-center gap-3">
                    <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-effect">
                        <i class="fa fa-save mr-1"></i> 保存草稿
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors btn-effect">
                        <i class="fa fa-paper-plane mr-1"></i> 提交审核
                    </button>
                </div>
            </div>
        </section>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧表单区域 -->
            <div class="lg:w-2/3">
                <!-- 文章标题模块 -->
                <section id="article-title" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">文章标题 <span class="text-red-500">*</span></label>
                    <input 
                        type="text" 
                        id="title" 
                        placeholder="请输入吸引人的标题，建议不超过30个字" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg form-focus"
                    >
                    <p class="mt-2 text-xs text-gray-500 flex items-center">
                        <i class="fa fa-info-circle mr-1"></i>
                        好的标题能吸引更多读者，包含关键词会更容易被搜索到
                    </p>
                </section>

                <!-- 文章封面模块 -->
                <section id="article-cover" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">文章封面 <span class="text-red-500">*</span></label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-colors cursor-pointer group">
                        <div class="max-w-md mx-auto">
                            <i class="fa fa-cloud-upload text-4xl text-gray-400 group-hover:text-primary transition-colors"></i>
                            <p class="mt-3 text-gray-600">点击上传或拖拽图片到此处</p>
                            <p class="mt-1 text-xs text-gray-500">
                                建议尺寸: 1200 × 630px，支持JPG、PNG格式，文件大小不超过5MB
                            </p>
                            <button class="mt-4 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors text-sm">
                                选择图片
                            </button>
                        </div>
                    </div>
                    <div id="cover-preview" class="mt-4 hidden">
                        <div class="relative inline-block">
                            <img src="" alt="文章封面预览" class="max-w-full h-auto rounded-lg shadow-sm">
                            <button class="absolute top-2 right-2 bg-white/80 text-gray-600 hover:text-red-500 p-1.5 rounded-full shadow-sm transition-colors">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                </section>

                <!-- 文章内容模块 -->
                <section id="article-content" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">文章内容 <span class="text-red-500">*</span></label>
                    
                    <!-- 编辑器工具栏 -->
                    <div class="border-b border-gray-200 pb-2 mb-3 flex flex-wrap gap-1">
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="加粗">
                            <i class="fa fa-bold"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="斜体">
                            <i class="fa fa-italic"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="下划线">
                            <i class="fa fa-underline"></i>
                        </button>
                        <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="标题">
                            <i class="fa fa-header"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="无序列表">
                            <i class="fa fa-list-ul"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="有序列表">
                            <i class="fa fa-list-ol"></i>
                        </button>
                        <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入链接">
                            <i class="fa fa-link"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入图片">
                            <i class="fa fa-image"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入代码">
                            <i class="fa fa-code"></i>
                        </button>
                        <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="对齐方式">
                            <i class="fa fa-align-left"></i>
                        </button>
                        <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="清除格式">
                            <i class="fa fa-eraser"></i>
                        </button>
                    </div>
                    
                    <!-- 编辑器内容区 -->
                    <div class="min-h-[400px] border border-gray-300 rounded-lg p-4 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none" contenteditable="true">
                        <p>请开始撰写你的文章内容...</p>
                        <p><br></p>
                        <p>建议：</p>
                        <ul>
                            <li>内容原创，观点明确</li>
                            <li>段落清晰，逻辑严谨</li>
                            <li>适当使用小标题、列表等格式</li>
                            <li>配图相关且清晰</li>
                        </ul>
                    </div>
                    
                    <div class="mt-3 flex justify-between items-center">
                        <p class="text-xs text-gray-500">
                            <i class="fa fa-info-circle mr-1"></i>
                            文章内容需大于300字，建议包含有价值的信息和独到的见解
                        </p>
                        <span class="text-xs text-gray-500" id="word-count">0 字</span>
                    </div>
                </section>

                <!-- 摘要模块 -->
                <section id="article-summary" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <label for="summary" class="block text-sm font-medium text-gray-700 mb-1">文章摘要</label>
                    <textarea 
                        id="summary" 
                        rows="3" 
                        placeholder="简要描述文章内容，将显示在文章列表和搜索结果中" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg form-focus resize-none"
                    ></textarea>
                    <p class="mt-2 text-xs text-gray-500 flex items-center">
                        <i class="fa fa-info-circle mr-1"></i>
                        摘要建议控制在100-300字，简洁明了地概括文章核心内容
                    </p>
                </section>

                <!-- 标签模块 -->
                <section id="article-tags" class="bg-white rounded-xl shadow-sm p-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">标签</label>
                    
                    <div class="flex flex-wrap gap-2 mb-4" id="tags-container">
                        <!-- 标签将动态添加到这里 -->
                    </div>
                    
                    <div class="flex items-center gap-2">
                        <input 
                            type="text" 
                            id="tag-input" 
                            placeholder="输入标签，按回车添加（最多5个）" 
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg form-focus"
                        >
                        <button id="add-tag" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors btn-effect">
                            添加
                        </button>
                    </div>
                    
                    <p class="mt-2 text-xs text-gray-500 flex items-center">
                        <i class="fa fa-info-circle mr-1"></i>
                        标签用于文章分类和推荐，使用逗号或回车键分隔，最多添加5个标签
                    </p>
                    
                    <div class="mt-4">
                        <p class="text-xs text-gray-600 mb-2">热门标签：</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors tag-suggestion">前端开发</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors tag-suggestion">人工智能</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors tag-suggestion">产品设计</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors tag-suggestion">用户体验</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors tag-suggestion">数据分析</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors tag-suggestion">职场成长</span>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 右侧设置区域 -->
            <div class="lg:w-1/3">
                <!-- 分类模块 -->
                <section id="article-category" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h3 class="text-base font-medium text-gray-900 mb-4">文章分类 <span class="text-red-500">*</span></h3>
                    
                    <div class="space-y-3">
                        <label class="flex items-center">
                            <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                            <span class="ml-2 text-gray-700">前端开发</span>
                        </label>
                        <div class="pl-6 space-y-2">
                            <label class="flex items-center">
                                <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-2 text-gray-600">HTML/CSS</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-2 text-gray-600">JavaScript</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-2 text-gray-600">框架与库</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-2 text-gray-600">前端工程化</span>
                            </label>
                        </div>
                        
                        <label class="flex items-center">
                            <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                            <span class="ml-2 text-gray-700">后端开发</span>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                            <span class="ml-2 text-gray-700">移动开发</span>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                            <span class="ml-2 text-gray-700">人工智能</span>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                            <span class="ml-2 text-gray-700">产品设计</span>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="radio" name="category" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                            <span class="ml-2 text-gray-700">职场与成长</span>
                        </label>
                    </div>
                </section>

                <!-- 发布设置模块 -->
                <section id="publish-settings" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h3 class="text-base font-medium text-gray-900 mb-4">发布设置</h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">发布时间</label>
                            <div class="flex items-center gap-3">
                                <label class="flex items-center">
                                    <input type="radio" name="publish-time" checked class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                    <span class="ml-2 text-gray-700">立即发布</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="publish-time" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                    <span class="ml-2 text-gray-700">定时发布</span>
                                </label>
                            </div>
                            <div id="schedule-time" class="mt-3 hidden">
                                <input type="datetime-local" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus text-sm">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">阅读权限</label>
                            <select class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus">
                                <option>公开可见</option>
                                <option>仅粉丝可见</option>
                                <option>仅自己可见</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">允许评论</label>
                            <div class="flex items-center gap-3">
                                <label class="flex items-center">
                                    <input type="radio" name="allow-comments" checked class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                    <span class="ml-2 text-gray-700">允许</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="allow-comments" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                    <span class="ml-2 text-gray-700">不允许</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 text-gray-700 text-sm">允许被其他文章引用</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 text-gray-700 text-sm">开启赞赏功能</span>
                            </label>
                        </div>
                    </div>
                </section>

                <!-- 内容规范模块 -->
                <section id="content-guidelines" class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-base font-medium text-gray-900 mb-4">内容规范</h3>
                    
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>内容需为原创，禁止抄袭或搬运他人作品</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>禁止发布违法违规、低俗色情、暴力恐怖等内容</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>禁止发布广告、营销、推广性质的内容</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>禁止发布政治敏感、宗教相关的内容</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>禁止发布虚假信息、谣言或误导性内容</span>
                        </li>
                    </ul>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <label class="flex items-start">
                            <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded mt-0.5">
                            <span class="ml-2 text-gray-700 text-sm">我已阅读并同意遵守以上内容规范，文章内容真实有效</span>
                        </label>
                    </div>
                </section>
            </div>
        </div>

        <!-- 操作按钮模块 -->
        <section id="action-buttons" class="mt-8 flex flex-wrap justify-between items-center gap-4 bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center gap-2">
                <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-effect">
                    <i class="fa fa-eye mr-1"></i> 预览文章
                </button>
                <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-effect">
                    <i class="fa fa-history mr-1"></i> 历史版本
                </button>
                <button class="px-4 py-2 border border-red-200 rounded-md text-red-600 hover:bg-red-50 transition-colors btn-effect">
                    <i class="fa fa-trash mr-1"></i> 删除草稿
                </button>
            </div>
            
            <div class="flex items-center gap-3">
                <button class="px-6 py-2.5 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-effect">
                    <i class="fa fa-save mr-1"></i> 保存草稿
                </button>
                <button class="px-6 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors btn-effect">
                    <i class="fa fa-paper-plane mr-1"></i> 提交审核
                </button>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12 py-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2023 创作者平台 版权所有</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">帮助中心</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">内容规范</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">联系我们</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">隐私政策</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
        <i class="fa fa-chevron-up"></i>
    </button>

    <script>
        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 发布时间选项切换
        const publishTimeRadios = document.querySelectorAll('input[name="publish-time"]');
        const scheduleTime = document.getElementById('schedule-time');
        
        publishTimeRadios.forEach(radio => {
            radio.addEventListener('change', () => {
                if (radio.value === '定时发布' || radio.nextElementSibling.textContent === '定时发布') {
                    scheduleTime.classList.remove('hidden');
                } else {
                    scheduleTime.classList.add('hidden');
                }
            });
        });
        
        // 标签功能
        const tagInput = document.getElementById('tag-input');
        const addTagBtn = document.getElementById('add-tag');
        const tagsContainer = document.getElementById('tags-container');
        const tagSuggestions = document.querySelectorAll('.tag-suggestion');
        
        // 最多允许的标签数量
        const MAX_TAGS = 5;
        
        // 添加标签函数
        function addTag(tagText) {
            // 验证标签是否为空
            if (!tagText.trim()) return;
            
            // 验证标签数量
            if (tagsContainer.children.length >= MAX_TAGS) {
                alert(`最多只能添加${MAX_TAGS}个标签`);
                return;
            }
            
            // 验证标签是否已存在
            const existingTags = Array.from(tagsContainer.children);
            if (existingTags.some(tag => tag.firstChild.textContent.trim() === tagText.trim())) {
                return;
            }
            
            // 创建标签元素
            const tag = document.createElement('div');
            tag.className = 'tag-item';
            tag.innerHTML = `
                ${tagText.trim()}
                <button class="remove-tag text-primary/70 hover:text-primary transition-colors">
                    <i class="fa fa-times-circle"></i>
                </button>
            `;
            
            // 添加删除标签事件
            tag.querySelector('.remove-tag').addEventListener('click', () => {
                tag.remove();
            });
            
            // 添加到容器
            tagsContainer.appendChild(tag);
            
            // 清空输入框
            tagInput.value = '';
        }
        
        // 点击添加标签按钮
        addTagBtn.addEventListener('click', () => {
            addTag(tagInput.value);
        });
        
        // 按回车键添加标签
        tagInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTag(tagInput.value);
            }
        });
        
        // 点击推荐标签添加
        tagSuggestions.forEach(suggestion => {
            suggestion.addEventListener('click', () => {
                addTag(suggestion.textContent);
            });
        });
        
        // 字数统计功能
        const contentEditable = document.querySelector('[contenteditable="true"]');
        const wordCountEl = document.getElementById('word-count');
        
        contentEditable.addEventListener('input', () => {
            // 计算字数（去除HTML标签）
            const text = contentEditable.innerText || '';
            const wordCount = text.length;
            wordCountEl.textContent = `${wordCount} 字`;
        });
        
        // 回到顶部按钮
        const backToTopBtn = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 500) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 模拟封面上传预览
        const coverUploadArea = document.querySelector('#article-cover .border-dashed');
        const coverPreview = document.getElementById('cover-preview');
        const coverImage = coverPreview.querySelector('img');
        const removeCoverBtn = coverPreview.querySelector('button');
        
        coverUploadArea.addEventListener('click', () => {
            // 模拟上传成功
            coverImage.src = 'https://picsum.photos/id/24/1200/630';
            coverImage.alt = '文章封面示例';
            coverPreview.classList.remove('hidden');
        });
        
        removeCoverBtn.addEventListener('click', () => {
            coverPreview.classList.add('hidden');
            coverImage.src = '';
            coverImage.alt = '';
        });
        
        // 编辑器工具栏功能模拟
        const boldBtn = document.querySelector('.fa-bold').parentElement;
        const italicBtn = document.querySelector('.fa-italic').parentElement;
        const underlineBtn = document.querySelector('.fa-underline').parentElement;
        
        boldBtn.addEventListener('click', () => {
            document.execCommand('bold', false, null);
            contentEditable.focus();
        });
        
        italicBtn.addEventListener('click', () => {
            document.execCommand('italic', false, null);
            contentEditable.focus();
        });
        
        underlineBtn.addEventListener('click', () => {
            document.execCommand('underline', false, null);
            contentEditable.focus();
        });
    </script>
</body>
</html>
